<template>
  <b-page class="group-manage" :load="!loading">
    <div class="table-page-search-wrapper">
      <a-button type="primary" icon="plus" @click="handleEdit()">新建</a-button>
    </div>

    <a-table
      rowKey="id"
      :pagination="pagination"
      :columns="columns"
      :data-source="dataList"
      @change="handleTableChange"
    >
      <span slot="createdDate" slot-scope="text, record">
        {{ getTime(record.createdDate) }}
      </span>
      <span slot="enabled" slot-scope="text, record">
        <div class="d-aic">
          <a-switch
            class="ml-20"
            :checked="!!record.enabled"
            @change="changeEnable(record)">
          </a-switch>
          <span :style="{marginLeft:'8px',color:record.enabled?'#46A0FC':''}">启用</span>
        </div>
      </span>
      <span slot="id" slot-scope="text, record">
        <a-button type="link" @click="gotoDetail(record.id)">编辑</a-button>
        <a-button type="link" @click="delSop(record)">删除</a-button>
      </span>
    </a-table>
  </b-page>
</template>

<script>
    import API from '@/api/sop'

    export default {
        name: 'SopManage',
        data () {
            return {
                pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 10 // 每页中显示10条数据
                },
                // 高级搜索 展开/关闭
                loading: false,
                // 表头
                columns: [
                    {
                        title: '名称',
                        width: '300px',
                        dataIndex: 'name'
                    },
                    {
                        title: '状态（开启/关闭）',
                        width: '100px',
                        scopedSlots: { customRender: 'enabled' }
                    },
                    {
                        title: '创建时间',
                        width: '100px',
                        scopedSlots: { customRender: 'createdDate' }
                    },
                    {
                        title: '操作',
                        width: '100px',
                        scopedSlots: { customRender: 'id' }
                    }
                ],
                dataList: []
            }
        },
        computed: {
            qwUserId () {
                return this.$store.state.user.info.qwUserId
            }
        },
        mounted () {
            this.getData()
        },
        methods: {
            getData () {
                API.pageSop(Object.assign({
                    current: this.pagination.current,
                    size: this.pagination.pageSize,
                    qwUserId: this.qwUserId
                }, this.queryParam))
                    .then(res => {
                        res.records.forEach(item => {
                            item.tagList = []
                            if (item.tag) {
                                item.tagList = item.tag.split(',')
                            }
                        })
                        this.dataList = res.records
                        this.pagination.current = res.current
                        this.pagination.total = res.total
                        this.loading = true
                    }).catch(() => {
                    this.loading = true
                })
            },
            changeEnable (row) {
                const self = this
                const cancelText = !row.enabled ? '发布' : '禁用'
                const status = !row.enabled ? 1 : 0
                this.$warning({
                    title: '是否' + cancelText + row.name,
                    okText: '确认',
                    okType: 'primary',
                    maskClosable: true,
                    onOk () {
                        API.enabledSop({
                            id: row.id,
                            qwUserId: self.qwUserId,
                            enabled: status
                        }).then(res => {
                            self.$message.success(`操作成功`)
                            row.enabled = status
                            // self.getData()
                        })
                    }
                })
            },
            delSop (item) {
                const self = this
                this.$warning({
                    title: `确认删除【${item.name}】吗？`,
                    okText: '确认',
                    okType: 'primary',
                    maskClosable: true,
                    onOk () {
                        API.deleteSop({ qwUserId: self.qwUserId, id: item.id }).then(() => {
                            self.$message.success(`删除成功`)
                            self.getData()
                        })
                    }
                })
            },
            handleTableChange (pagination) {
                this.pagination.current = pagination.current
                this.pagination.pageSize = pagination.pageSize
                this.getData()
            },
            gotoDetail (customerId) {
                this.$emit('onEdit', customerId)
            },
            handleEdit (record) {
                this.$emit('onEdit', record)
            },
            getTime (time) {
                return time ? this.$Utils.getTimeFormat(time).substring(0, 10) : ''
            }
        }
    }
</script>

<style scoped lang="less">
    .group-manage {
        .select-state {
            font-size: 14px;
            color: #101010;
        }

        .table-page-search-wrapper {
            position: relative;
            padding-bottom: 30px;
            border-bottom: 1px solid #D9D9D9;

            .update-desc-state {
                position: absolute;
                right: 0;
                bottom: 0;
                height: 30px;
                font-size: 12px;
                color: #52C41A;

                .desc-state-icon {
                    margin-left: 8px;
                    font-size: 20px;
                    animation: syncAnimal 1.5s forwards infinite;
                }
            }
        }

        .nickname-diy {
            font-size: 14px;
            color: #9f9f9f;
        }

        .remark-name {
            font-size: 14px;
            line-height: 26px;
            color: rgba(0, 0, 0, .65);
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }

        .ml-10 {
            margin-left: 10px;
        }

        .tag-item-style {
            max-width: 100px;
            margin: 0 8px 4px 0;
            padding: 0 7px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #f5222d;
            background: #fff1f0;
            border: 1px solid #ffa39e;
        }
    }

    .tag-item {
        height: 32px;
        line-height: 32px;
    }

    .add-tag-btn {
        height: 32px;
        margin-right: 20px;

        &.active {
            border: 1px solid #ff5f5f;
        }
    }

    .tag-group-name {
        min-width: 80px;
    }

</style>
